<template>
	<div>

		<div class="app-container">
			<TopInfo />

			<Search :lookup="data.lookup" @investigate="inves" />

			<el-button v-prmis="'strategy_income_add'" type="primary" size="small" @click="add">
				<template #default>
					<span class="text-sm">{{ $t('strategy.payee.add') }}</span>
				</template>
			</el-button>

		</div>

		<div class="app-container" v-loading="data.mtloading">
			<el-table ref="tacleRef" :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full">
				<el-table-column prop="income_name" :label="$t('strategy.income.name')" />
				<el-table-column prop="income_value" :label="$t('strategy.income.profitRatio')" />
				<el-table-column prop="transfer_method" :label="$t('strategy.income.way')" />
				<el-table-column prop="desc" :label="$t('public.describe')" />
				<el-table-column prop="status" :label="$t('public.state')">
					<template #default="scope">
						{{ setStatus(scope.row) }}
					</template>
				</el-table-column>
				<el-table-column prop="create_time" :label="$t('date.createTime')">
					<template #default="scope">
						{{ getPlevel.gettime(scope.row.create_time, 3) }}
					</template>
				</el-table-column>
				<el-table-column prop="update_time" :label="$t('date.modifyTime')">
					<template #default="scope">
						{{ getPlevel.gettime(scope.row.update_time, 3) }}
					</template>
				</el-table-column>
				<el-table-column :label="$t('public.operate')" width="200">
					<template #default="scope">
						<el-button type="primary" size="small"
							@click="add(scope.row, 1)">{{ $t('public.edit') }}</el-button>
						<el-button v-prmis="'auth_node_del'" :disabled="scope.row.hasChildren" type="danger"
							size="small" @click="onDel(scope.row)">{{ $t('public.del') }}</el-button>
					</template>
				</el-table-column>
			</el-table>
			<PageNum :total="data.total" :page="data.info" @exposeData="current" @fraction="fraction" />
		</div>

		<el-dialog v-model="data.dialogVisible" :title="data.title" center width="30%">
			<el-form v-if="data.dialogVisible" :model="data.adateg" :label-width="language=='en'?'130px':'100px'">
				<span :class="language=='en'?'absolute text-[#ef4444] mt-2 ml-2':'absolute text-[#ef4444] mt-2 ml-4'">*</span>
				<el-form-item :label="$t('strategy.payee.name') + ':'" prop="income_name">
					<el-input v-model="data.infoAdd.income_name" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>
				<span :class="language=='en'?'absolute text-[#ef4444] mt-2 ml-8':'absolute text-[#ef4444] mt-2 ml-4'">*</span>
				<el-form-item :label="$t('strategy.income.profitRatio') + ':'" prop="income_value">
					<el-input v-model.number="data.infoAdd.income_value" type="number"
						:placeholder="$t('message.pleaseEnter')" />
				</el-form-item>
				<span :class="language=='en'?'absolute text-[#ef4444] mt-2':'absolute text-[#ef4444] mt-2 ml-4'">*</span>
				<el-form-item :label="$t('strategy.income.way') + ':'" prop="transfer_method">
					<el-select v-model="data.infoAdd.transfer_method" :placeholder="$t('message.pleaseSelect')">
						<el-option v-for="item in data.transferList" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>
				<span :class="language=='en'?'absolute text-[#ef4444] mt-2 ml-8':'absolute text-[#ef4444] mt-2 ml-4'">*</span>
				<el-form-item :label="$t('strategy.strategy.type') + ':'" prop="s_type">
					<el-select v-model="data.infoAdd.status" :placeholder="$t('message.pleaseSelect')">
						<el-option :label="$t('public.enable')" value="1" />
						<el-option :label="$t('public.disable')" value="2" />
					</el-select>
				</el-form-item>
				<el-form-item :label="$t('public.describe') + ':'" prop="desc">
					<el-input v-model="data.infoAdd.desc" type="textarea" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>


				<div class="w-full text-center">
					<div class="inline-block">
						<el-button type="primary" @click="save()">{{ $t('public.save') }}</el-button>
						<el-button @click="data.dialogVisible = false">{{ $t('public.cancel') }}</el-button>
					</div>
				</div>

			</el-form>
		</el-dialog>

	</div>

</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import getPlevel from '@/utils/level'
import { getincomeList, addincome, updateincome, delincome } from '@/api/income';
import { onMounted } from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
	language.value = locale.value
})
let tacleRef = ref()
let data = reactive({
	dialogVisible: false,
	mtloading: false, // 加载
	lookup: [ // 筛选栏
		{ title: $t('strategy.payee.name'), type: 'input', value: '', key: 'income_name' },
		{ title: $t('strategy.strategy.status'), type: 'define', select: [{ label: $t('public.enable'), value: 1 }, { label: $t('public.prohibit'), value: 2 },], value: '', key: 'status' },
	],
	transferList: [
		{ label: $t('public.pay.wallet'), value: 1 },
		{ label: $t('public.pay.transferTo'), value: 21 },
		{ label: $t('public.pay.merchantTo'), value: 22 },
		{ label: $t('public.pay.alipaTo'), value: 3 },
		{ label: $t('public.pay.JDTo'), value: 4 }
	],
	si_id: '',
	falg: null,
	title: '',
	list: [], // 列表信息
	info: {
		ncome_name: '',
		income_value: null,
		transfer_method: null,
		desc: '',
		status: null,
		page: 1,
		pageNum: 15
	},
	infoAdd: {
		ncome_name: '',
		income_value: null,
		transfer_method: null,
		desc: '',
		status: null
	},
	total: 0, // 总条数
})
let setStatus = (row) => {
	if (row.status == 1) {
		row.statusCn = $t('public.enable')
	}
	if (row.status == 2) {
		row.statusCn =  $t('public.prohibit')
	}
	return row.statusCn
}
let onDel = (row: any) => {
	ElMessageBox.confirm($t('message.delData'))
		.then(res => {
			delincome({ si_id: row.si_id }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					})
					data.dialogVisible = false
					getlist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})
}
let setSave = (res: any) => {
	if (res.state == 200) {
		ElMessage({
			message: $t('message.modifySuccess'),
			type: 'success'
		})
		data.dialogVisible = false
		getlist()
		return
	}
	ElMessage({
		message: $t('message.networkFailed'),
		type: 'error'
	})
}
// 提交数据
let save = () => {
	if (!data.infoAdd.income_name || !data.infoAdd.income_value || !data.infoAdd.transfer_method || !data.infoAdd.status) {
		ElMessage({
			 message:  $t('message.pleaseFill'),
			type: 'error'
		})
		return
	}
	let obj = {
		income_name: data.infoAdd.income_name,
		income_value: data.infoAdd.income_value,
		transfer_method: data.infoAdd.transfer_method,
		desc: data.infoAdd.desc,
		status: data.infoAdd.status,
	}
	// 修改策略
	if (data.falg == 1) {
		obj.si_id = data.si_id
		updateincome(obj).then(res => {
			setSave(res)
		})
	}
	if (!data.falg) {
		// 添加策略
		addincome(obj).then(res => {
			setSave(res)
		})
	}

}
// 添加策略
let add = (row, flag) => {
	data.falg = flag
	if (flag == 1) {
		data.si_id = row.si_id,
			data.title = $t('strategy.income.modify')
		data.infoAdd = {
			income_name: row.income_name,
			income_value: row.income_value,
			desc: row.desc,
			transfer_method: row.transfer_method,
			status: row.status,
		}
	}
	if (!flag) {
		data.infoAdd = {}
		data.title = $t('strategy.income.add')
	}
	data.dialogVisible = true
}
let getlist = () => {
	getincomeList(data.info).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	}).catch(err => {
		data.mtloading = false
	})
}
// 查询回调
let inves = (e) => {
	data.info.income_name = ''
	data.info.status = null
	for (let key in e) {
		data.info[key] = e[key]
	}
	data.info.page = 1
	data.info.pageNum = 15
	getlist()
}
// 页数回调
let current = (e) => {
	data.info.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.info.pageNum = e
	getlist()
}
getlist()

</script>
